<script setup lang="ts">
import { shallowRef, type Component } from 'vue';
import { App } from 'ant-design-vue';
import {
  FEATURE_UNLOCK_ID,
  type FeatureId,
} from '../../game/data/feature-unlock/type';
import { EVENTS, GameKernel } from '../../game';
import StartGame from './start-game.vue';
import StarBackgroundContainer from './components/star-background-container/index.vue';
import StartGameSpiritualRoot from './start-game-spiritual-root.vue';
import GameFooter from './components/footer.vue';
import GameHeader from './components/header.vue';
import StoryPlayer from './story-player.vue';
import SettingView from './setting/index.vue';
import CultivationView from './cultivation/index.vue';
import BackpackView from './backpack/index.vue';
import SectView from './sect/index.vue';
import OfflineEarningsView from './offline-earnings/index.vue';
import UserNameView from './user-name.vue';
import HomeView from './home/index.vue';
import WorldView from './world/index.vue';

const { message } = App.useApp();

const menuComponents: {
  id: FeatureId;
  component: Component;
}[] = [
  {
    id: FEATURE_UNLOCK_ID.CULTIVATION,
    component: CultivationView,
  },
  {
    id: FEATURE_UNLOCK_ID.BACKPACK,
    component: BackpackView,
  },
  {
    id: FEATURE_UNLOCK_ID.WORLD,
    component: WorldView,
  },
  {
    id: FEATURE_UNLOCK_ID.SECT,
    component: SectView,
  },
  {
    id: FEATURE_UNLOCK_ID.HOME,
    component: HomeView,
  },
];
const currentView = shallowRef<Component | null>(null);

function onFooterMenuSelect(id: FeatureId) {
  const item = menuComponents.find((i) => i.id === id);
  if (!item) {
    currentView.value = null;
    return;
  }
  currentView.value = item.component;
}

GameKernel.inst.bus.on(EVENTS.GAME_MESSAGE, (text) => {
  message.info(text);
});
</script>

<template>
  <div class="h-full flex flex-col relative">
    <star-background-container :is-absolute="false">
      <game-header></game-header>
      <div class="flex-1 overflow-auto">
        <component :is="currentView"></component>
      </div>
      <game-footer @select="onFooterMenuSelect"></game-footer>
    </star-background-container>
    <offline-earnings-view></offline-earnings-view>
    <start-game-spiritual-root></start-game-spiritual-root>
    <user-name-view></user-name-view>
    <story-player></story-player>
    <setting-view></setting-view>
    <start-game></start-game>
  </div>
</template>
